<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item @click.stop.native="refresh" class="custom_breadcrumb">
                    <i class="el-icon-lx-cascades"></i> 店铺装修
                </el-breadcrumb-item>
                <el-breadcrumb-item>自定义页面</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="page">
            <div class="xjheader">
                <!-- <el-button :class="'xjheaderbutton '+pcbtnclass" @click="clickPcbtn()">PC端</el-button> -->
                <el-button :class="'xjheaderbutton ' + phonebtnclass" @click="clickPhonebtn()">移动端</el-button>
            </div>
            <div v-show="pcshow" class="xjshow">
                <el-button type="success" class="xjbutton">+新建页面</el-button>
            </div>

            <div v-show="phoneshow" class="xjshow">
                <el-row type="flex" justify="space-between">
                    <el-col :span="6" style="padding: 10px"><el-tag effect="dark">模板列表</el-tag></el-col>
                    <!-- <el-button type="warning" class="xjbutton" @click="tohome()">进入页面</el-button> -->
                    <el-col :span="3">
                        <el-button type="success" class="xjbutton" @click="customPhone()">+新建页面</el-button>

                        <el-button type="primary" class="xjbutton" @click="newweb('/h5_iframe')">查看页面</el-button>
                    </el-col>
                </el-row>
                <!-- <el-button class="xjbutton backcolor">自定义页面</el-button>
                <el-button type="info" class="xjbutton">自定义导航</el-button> -->

                <!-- <div class="xj-mainshow container"> -->
				<div class="xj-mainshow">
						<!-- <div class="xj-phoneshow" v-for="(items, listindex) in itemslist"> -->
						<div class="xj-phoneshow" v-for="(items, listindex) in itemslist" :key="listindex" v-on:mouseenter="showDialog(listindex)" v-on:mouseleave="hideDialog(listindex)" :accesskey="listindex" style="position: relative;">
                        <div class="xj-customedit">
                            <!-- <el-button type="success" class="xj-minibtn" icon="el-icon-view" @click="previewPhone(itemsshopdataid[listindex])">预览</el-button> -->
                            <!-- <el-button
                                    type="warning"
                                    :class="itemssetindex[listindex] == '这个为首页' ? 'xj-minibtn  xj-btnborder' : 'xj-minibtn'"
                                    icon="el-icon-s-home"
                                    @click="setPhoneIndex(itemsshopdataid[listindex], listindex)"
                                    >{{ itemssetindex[listindex] }}</el-button
                                > -->
                            <!-- <el-button
                                type="primary"
                                class="xj-minibtn"
                                icon="el-icon-edit-outline"
                                @click="usetemplate(itemsshopdataid[listindex])"
                                >使用此模板</el-button
                            > -->
                            <!-- <el-button
                                    type="danger"
                                    class="xj-minibtn"
                                    icon="el-icon-close"
                                    @click="deletePhone(itemsshopdataid[listindex])"
                                    >删除</el-button
                                > -->
                        </div>
                        <div class="xj-phonetop">
                            <div class="xj-pageheader">
                                <div class="config-preview"><span class="page-title"> 点击设置页面标题 </span>wd</div>
                            </div>
                            <div class="xj-elementshow" @click.stop="doSomething($event)">
                                <div v-for="(item, index) in items" :key="index">
                                    <div v-html="item.div ? item.div : ''" @click="clickedit(item, index)"></div>
                                    <component
                                        :is="item.component"
                                        v-if="item.component ? true : false"
                                        :customtext="item.customtext"
                                        :lunbotu="item.swiperimg"
                                        :dantu="item.dantuimg"
                                        :gonggao="item.gonggaotext"
                                        :eyegzh="item.eyegzhtext"
                                        :category="item.categorydata"
                                        :tuwennav="item.tuwennavimg"
                                        :youhuinav="item.youhuinavimg"
                                    >
                                    </component>
                                </div>
								
								
								<!-- 当鼠标移入时显示蒙版 -->
								<div class="handleDialog" v-if="isShow && listindex == current">
									<el-button
									    type="primary"
										class="xj-maskbtn"
									    @click="usetemplate(itemsshopdataid[listindex])"
									    >使用此模板</el-button>
								</div>
								
                            </div>
                        </div>
                        <xjmenubar :menubar="itemsmenubar[listindex]" :prevent="true"></xjmenubar
                        ><!--用prevent区别显示和跳转显示的区分-->
                    </div>
					
                </div>
                <el-row type="flex" justify="space-between">
                    <el-col :span="6" style="padding: 10px"><el-tag effect="dark">使用列表</el-tag></el-col>
                </el-row>
                <div class="xj-mainshow">
                    <!-- <div class="xj-phoneshow" v-for="(items, listindex) in itemslist2" :key="listindex"> -->
					<div class="xj-phoneshow" v-for="(items, listindex) in itemslist2" :key="listindex" v-on:mouseenter="showDialogUse(listindex)" v-on:mouseleave="hideDialogUse(listindex)" :accesskey="listindex" style="position: relative;">
                        <div class="xj-customedit">
                            <!-- <el-button type="success" class="xj-minibtn" icon="el-icon-view" @click="previewPhone(itemsshopdataid[listindex])">预览</el-button> -->
                            <!-- <el-button
                                type="warning"
                                :class="itemssetindex2[listindex] == '这个为首页' ? 'xj-minibtn  xj-btnborder' : 'xj-minibtn'"
                                icon="el-icon-s-home"
                                @click="setPhoneIndex(itemsshopdataid2[listindex], listindex)"
                                >{{ itemssetindex2[listindex] }}</el-button
                            > -->
							
                            <!-- <el-button
                                type="primary"
                                class="xj-minibtn"
                                icon="el-icon-edit-outline"
                                @click="editPhone(itemsshopdataid2[listindex])"
                                >编辑</el-button
                            > -->
                            <!-- <el-button
                                    type="danger"
                                    class="xj-minibtn"
                                    icon="el-icon-close"
                                    @click="deletePhone(itemsshopdataid[listindex])"
                                    >删除</el-button
                                > -->
                        </div>
                        <div class="xj-phonetop">
                            <div class="xj-pageheader">
                                <div class="config-preview"><span class="page-title"> 点击设置页面标题 </span>wd</div>
                            </div>
                            <div class="xj-elementshow" @click.stop="doSomething($event)">
                                <div v-for="(item, index) in items" :key="index">
                                    <div v-html="item.div ? item.div : ''" @click="clickedit(item, index)"></div>
                                    <component
                                        :is="item.component"
                                        v-if="item.component ? true : false"
                                        :customtext="item.customtext"
                                        :lunbotu="item.swiperimg"
                                        :dantu="item.dantuimg"
                                        :gonggao="item.gonggaotext"
                                        :eyegzh="item.eyegzhtext"
                                        :category="item.categorydata"
                                        :tuwennav="item.tuwennavimg"
                                        :youhuinav="item.youhuinavimg"
                                    >
                                    </component>
                                </div>
								<!-- 当鼠标移入时显示蒙版 -->
								<div class="handleDialog" v-if="isShowUse && listindex == currentUse">
									<el-button
									    type="warning"
									    :class="itemssetindex2[listindex] == '这个为首页' ? 'xj-maskbtnIsIndex  xj-btnborder' : 'xj-maskbtnSet'"
									    icon="el-icon-s-home"
									    @click="setPhoneIndex(itemsshopdataid2[listindex], listindex)"
									    >{{ itemssetindex2[listindex] }}</el-button
									>
									
									<el-button
									    type="primary"
										:class="itemssetindex2[listindex] == '这个为首页' ? 'xj-maskbtn' : 'xj-maskbtnEdit'"
									    icon="el-icon-edit-outline"
									    @click="editPhone(itemsshopdataid2[listindex])"
									    >编辑</el-button
									>
								</div>
								
								<div :class="itemssetindex2[listindex] == '这个为首页' ? 'xj-phoneshowIndex' : ''"></div>
                            </div>
                        </div>
                        <xjmenubar :menubar="itemsmenubar[listindex]" :prevent="true"></xjmenubar
                        ><!--用prevent区别显示和跳转显示的区分-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getMorePhonePageData, setPhoneIndex, deletePhonePage, usetemplate } from '../../api/index.js';
import xjsearch from '@/components/shop/xjsearch.vue';
import xjcustomtext from '@/components/shop/xjcustomtext.vue';
import xjlunbotu from '@/components/shop/xjlunbotu.vue';
import xjdantu from '@/components/shop/xjdantu.vue';
import xjgonggao from '@/components/shop/xjgonggao.vue';
import xjeyegzh from '@/components/shop/xjeyegzh.vue';
import xjtuwennav from '@/components/shop/xjtuwennav.vue';
import xjyouhuinav from '@/components/shop/xjyouhuinav.vue';
import xjmenubar from '@/components/shop/xjmenubar.vue';
import xjcategory from '@/components/shop/xjcategory.vue';
import xjuserservice from '@/components/shop/xjuserservice.vue';
export default {
    components: {
        xjsearch,
        xjcustomtext,
        xjlunbotu,
        xjdantu,
        xjgonggao,
        xjeyegzh,
        xjtuwennav,
        xjmenubar,
        xjcategory,
        xjuserservice,
        xjyouhuinav
    },
    data() {
        return {
            pcshow: false,
            phoneshow: true,
            pcbtnclass: '',
            phonebtnclass: 'phonebtnclass',
            itemslist: [],
            itemsshopdataid: [],
            itemsmenubar: [],
            itemssetindex: [],
            itemslist2: [],
            itemsshopdataid2: [],
            itemsmenubar2: [],
            itemssetindex2: [],
			isShow: false,// 默认情况下不显示蒙版
			current: 0,
			isShowUse: false,// 默认情况下不显示蒙版
			currentUse: 0,
        };
    },
    methods: {
		
		showDialog(listindex){
			this.isShow = true;
			this.current = listindex;
		},
		hideDialog(listindex){
			this.isShow = false;
			this.current = null;
		},
		
		showDialogUse(listindex){
			this.isShowUse = true;
			this.currentUse = listindex;
		},
		hideDialogUse(listindex){
			this.isShowUse = false;
			this.currentUse = null;
		},
		
        newweb(path) {
            let domainname=localStorage.getItem('domainname')
            // 创建一个新的窗口对象
            window.open(`http://www.nashicike.top/xuejing/my/${domainname}`, '_blank', 'width=380,height=700,right=0,top=50,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes');

            // let routeUrl = this.$router.resolve({
            //     path,
            // });
            // window.open(routeUrl.href, '_blank')
        },
        tohome() {
            this.$router.push({
                name: 'shopindex'
            });
        },
        refresh() {
            location.reload();
        },
        clickPcbtn() {
            this.pcshow = true;
            this.phoneshow = false;
            this.pcbtnclass = 'pcbtnclass';
            this.phonebtnclass = '';
        },
        clickPhonebtn() {
            this.pcshow = false;
            this.phoneshow = true;
            this.phonebtnclass = 'phonebtnclass';
            this.pcbtnclass = '';
        },
        customPhone() {
            localStorage.setItem('shopdataid', '');
            this.$router.push('/custom/customPhone');
        },
        getMorePhonePageData() {
            getMorePhonePageData().then((res) => {
                //console.log(res);return;
                if (res.code == 1) {
                    let enablephoneshopdataid = res.data.enablephoneshopdataid;
                    for (let i = 0; i < res.data.shopdatajsontem.length; i++) {
                        this.itemslist.push(JSON.parse(res.data.shopdatajsontem[i].phonepagedata));
                        this.itemsshopdataid.push(res.data.shopdatajsontem[i].shopdataid);
                        this.itemsmenubar.push(JSON.parse(res.data.shopdatajsontem[i].tabbar));
                        if (enablephoneshopdataid == res.data.shopdatajsontem[i].shopdataid) {
                            this.itemssetindex.push('这个为首页');
                        } else {
                            this.itemssetindex.push('设置为首页');
                        }
                    }
                    for (let i = 0; i < res.data.shopdatajsonarr.length; i++) {
                        this.itemslist2.push(JSON.parse(res.data.shopdatajsonarr[i].phonepagedata));
                        this.itemsshopdataid2.push(res.data.shopdatajsonarr[i].shopdataid);
                        this.itemsmenubar2.push(JSON.parse(res.data.shopdatajsonarr[i].tabbar));
                        if (enablephoneshopdataid == res.data.shopdatajsonarr[i].shopdataid) {
                            this.itemssetindex2.push('这个为首页');
                        } else {
                            this.itemssetindex2.push('设置为首页');
                        }
                    }
                } else {
                    //console.log("获取手机页面数据失败");
                }
            });
            // console.log(this.itemslist, this.itemslist2);
        },
        setPhoneIndex(shopdataid, listindex) {
            setPhoneIndex({ shopdataid }).then((res) => {
                if (res.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '设置首页成功了!'
                    });
                    //this.itemssetindex[listindex]="这个是首页";
                    this.getMorePhonePageData();
                    location.reload();
                } else {
                    this.$message({
                        type: 'success',
                        message: '设置首页失败了!'
                    });
                }
            });
        },
        previewPhone(shopdataid) {
            localStorage.setItem('shopdataid', shopdataid);
            this.$router.push('/tmpshop');
        },
        editPhone(shopdataid) {
            localStorage.setItem('shopdataid', shopdataid);
            this.$router.push('/custom/customPhone');
        },

        async usetemplate(shopdataid) {
            let rst = await usetemplate({ shopdataid });
            location.reload();
        },
        deletePhone(shopdataid) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deletePhonePage({ shopdataid }).then((res) => {
                        //console.log(res);
                        if (res.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getMorePhonePageData();
                            //this.$router.replace('/refresh')
                        } else {
                            this.$message({
                                type: 'success',
                                message: '出错了，删除失败!'
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        }
    },
    created() {
        this.getMorePhonePageData();
    }
};
</script>

<style lang="scss" scoped>
/* 设置蒙版样式 */
.handleDialog{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	background: rgba(0, 0, 0, 0.6);
	// background: rgba(123, 123, 123, 0.4);
	width: 100%;
	height: 100%;
	border-radius: 14px;
}

.page iframe {
    width: 100%;
    height: 100%;
    /* border: medium none; */
    border: 1px solid red;
}

.page {
    .xjheader {
        height: 40px;

        .xjheaderbutton {
            border-radius: 4px 4px 0 0;
            background-color: #eee;
            border: 1px solid #ddd;
            border-bottom: none;
            margin-right: 5px;
            font-size: 12px;
            height: 41px;
        }

        .pcbtnclass {
            background-color: white;
        }

        .phonebtnclass {
            background-color: white;
        }
    }

    .xjshow {
        width: 100%;
        height: 100%;
        background-color: white;
        border: 1px solid #ddd;

        .xj-mainshow {
            margin-top: 30px;
            margin-left: 30px;
            height: 100%;
            width: 1600px;
            //border: 1px solid red;
            display: flex;
            flex-flow: row wrap;


			.xj-phoneshowIndex {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 900;
				background: rgba(123, 123, 123, 0.4);
				width: 100%;
				height: 100%;
				border-radius: 14px;
			}
			
            .xj-phoneshow {
                width: 320px;
                display: flex;
                flex-direction: column;
                margin-right: 20px;
                margin-bottom: 20px;

                .xj-phonetop {
                    background-color: white;
                    border: 1px solid #ddd;

                    .xj-pageheader {
                        height: 50px;
                        width: 100%;
                        position: relative;

                        .config-preview {
                            background: url(../../assets/img/img_top_weixin.png) no-repeat;
                            background-size: cover;
                            width: 100%;
                            height: 50px;
                            border-radius: 4px 4px 0 0;
                            position: relative;

                            .page-title {
                                display: block;
                                width: 100%;
                                text-align: center;
                                position: absolute;
                                bottom: 3px;
                                font-weight: 700;
                                font-size: 14px;
                                left: 0;
                                color: #fff;
                            }
                        }
                    }

                    ::-webkit-scrollbar {
                        width: 0px;
                        background-color: #aeaeae;
                    }

                    .xj-elementshow {
                        width: 100%;
                        height: 500px;
                        display: block;
                        //overflow: hidden;
                        overflow-y: scroll;
                    }
                }

                .xj-customedit {
                    margin-top: 5px;
                    display: flex;
                    flex-direction: row;
                    // justify-content: center;

                    .xj-minibtn {
                        padding: 5px 10px !important;
                        font-size: 12px;
                    }
                    .xj-btnborder {
                        background-color: red;
                        color: white;
                    }
                }
            }
        }
    }
	
	.xj-maskbtn {
		width: 100px;
		//height: 32px;
		margin-left: 33%;
		margin-top: 80%;
		font-size: 12px;
	}
	
	.xj-maskbtnSet {
		width: 120px;
		margin-left: 13%;
		margin-top: 80%;
		font-size: 12px;
	}
	
	.xj-maskbtnEdit {
		width: 100px;
		// margin-left: 33%;
		// margin-top: 80%;
		font-size: 12px;
	}
	
	.xj-maskbtnIsIndex {
		width: 120px;
		margin-left: 13%;
		margin-top: 80%;
		font-size: 12px;
		display: none;
	}

    .xjbutton {
        width: 100px;
        //height: 32px;
        // margin-left: 10px;
        margin-top: 20px;
        font-size: 12px;
    }

    .backcolor {
        background-color: $shenlv;
        color: white;
    }
}
.xjlook {
    position: absolute;
    right: 30px;
}
</style>

<style>
.custom_breadcrumb .el-breadcrumb__inner {
    color: #303133;
    font-weight: 700;
}

.custom_breadcrumb .el-breadcrumb__inner:hover {
    color: #409eff;
    cursor: pointer;
}
</style>
